/**
<!--* @desc:  考勤统计-自由班制（月）-->
* @author qiankui
* @date 2023-4-15 15:37:45
*/
<template>
  <div class="page-container h-100">
    <div class="wrapperform m-b-16">
      <div class="searchbox">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <!--打卡日期（月份）-->
          <el-form-item label="月份查询">
            <el-date-picker
                style="width: 200px !important;"
                class="inputEl"
                v-model="regDate"
                value-format="yyyy-MM"
                type="month"
                format="yyyy-MM"
                range-separator="~"
                :start-placeholder="$t('Start Date')"
                :end-placeholder="$t('End Date')"
                align="right">
            </el-date-picker>
          </el-form-item>
          <!--姓名-->
          <el-form-item :label="$t('name')">
            <!--请输入姓名-->
            <el-input class="inputEl" v-model="form.name" :placeholder="$t('Please enter your name')"></el-input>
          </el-form-item>
          <!--组织-->
          <el-form-item :label="$t('OrganizationalGrouping')">
            <el-cascader
                ref="cascader"
                clearable
                collapse-tags
                v-model="departmentIds"
                :props="defaultProps"
                :options="orgInfo"
                :show-all-levels="false"
            >
              <template slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                <span v-if="data.departmentInfos!==undefined"> ({{ data.departmentInfos.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>
          <el-form-item class="BlankPlaceholder formOperationButtons" label=".">
            <!--查询-->
            <el-button size="small" type="primary" class="topBtn" @click="getList">{{ this.i18n.t('Query') }}
            </el-button>
            <!-- </el-form-item>
          </el-col>
          <el-col :span="2" flex="none">
            <el-form-item class="BlankPlaceholder" label="."> -->
            <!--重置-->
            <el-button size="small" type="handle" class="topBtn" @click="resetSearch">
              {{ this.i18n.t('Reset') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="table-container table-box globalDiv">
      <el-table stripe height="calc(100vh - 330px)" :data="dataList.values" v-loading="tableLoading"
                :element-loading-background="elLoadingConfig.background" :header-cell-style="{ 'background-color': 'rgba(201, 215, 242, 1)' }" show-serial>
        <!--        <el-table-column type="index" label="序号" width="100px" align="center"></el-table-column>-->
        <el-table-column align="center" width="100">
          <template slot-scope="scope">
            <p>{{ scope.$index + 1 }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="200px" label="日期范围">
          <template slot-scope="scope">
            <p>{{ scope.row.startTime.substring(0, scope.row.startTime.length-3)}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="personName" label="姓名" width="120"></el-table-column>
        <el-table-column prop="orgnizaitionName" label="组织分组">
          <template slot-scope="scope">
            {{scope.row.orgnizaitionName||'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="totalAttendanceTime" label="应出勤天数(小时)"></el-table-column>
        <el-table-column prop="actualAttendanceTime" label="实际出勤时长(小时)">
          <template slot-scope="scope">
            {{scope.row.actualAttendanceTime?scope.row.actualAttendanceTime.toFixed(2):'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="absentTimes" label="旷工次数"></el-table-column>
        <el-table-column prop="overtimeTime" label="加班时长(小时)">
          <template slot-scope="scope">
            {{scope.row.overtimeTime?scope.row.overtimeTime.toFixed(2):'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <i class="icon icon-eye" @click="preview(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="background: #fff;padding: 10px;border:0px solid red;position: relative;bottom: 10px;padding-bottom: 10px">
      <!--导出EXCEL-->
      <el-button size="mini" icon="el-icon-upload2" @click="attendancegroupExportz_attendancestatistictoexcel">{{this.i18n.t('Export')}}</el-button>
      <el-pagination
          :disabled="tableLoading"
          style="display: inline-block;float: right;position: relative;bottom: 0px"
          small
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page.sync="form.pageNumber"
          :page-size="form.pageSize"
          layout="sizes,total, prev, pager, next, jumper"
          :total="dataList.totalCount"
          :page-sizes="[10, 20, 50, 100]"
      ></el-pagination>
    </div>
    <attendance-record-month  v-if="detailsVisible" :detailsVisible.sync="detailsVisible" :tableRow="tableRow" ref="attendanceRef" />
  </div>
</template>

<script>
import AttendanceRecordMonth from "./attendance-record-month.vue";
import { getMonthDate } from "@/assets/common/js/global";//引入月份日期计算
import {filterLastTreeData} from '@/views/rygl/utils.js'
import {getdepartmenttree} from "@/api/pcmj/zzxx";
import {
  attendancegroupExportz_attendancestatistictoexcel,
  attendancegroupZ_attendancestatistic, attendancegroupZgetdetails
} from "@/api/pcmj/kqtj";

export default {
  name: "kqtj_y",
  components: {
    AttendanceRecordMonth
  },
  props: {},
  data() {
    return {
      tableLoading: false,
      detailsVisible: false,
      tableRow:{},
      dataList: {},
      orgInfo: [],
      defaultProps: {
        multiple: true,
        children: 'departmentInfos',
        label: 'name',
        value: 'id',
        checkStrictly: false,
        disabled: function (data, node) {

        }
      },
      departmentIds: [],
      form: {
        departmentIds: [],
        name: null,
        pageNumber: 1,
        pageSize: 10,
        z_AttendanceType: 1,
      },
      regDate: null,
      dateObject:null
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initMonth()
    this.getList()
    this.getdepartmenttree()
  },
  beforeDestroy() {

  },
  methods: {
    preview(row) {
      this.attendancegroupZgetdetails(row)
    },
    // 点击表格操作列的查看按钮时，弹窗数据从接口读取
    attendancegroupZgetdetails(row){
      var params={
        personId:row.personId,
        startTime:row.startTime,
        endTime:row.endTime,
      }
      this.tableLoading=true
      attendancegroupZgetdetails(params).then(res => {
        if (res.code == 200) {
          this.tableRow={
            details:res.data,
            personName:row.personName
          }
          setTimeout(()=>{
            this.detailsVisible=true
          },500)
        }
      }).catch().finally(()=>{
        setTimeout(()=>{
          this.tableLoading=false
        },500)
      })
    },
    // 设置月份
    initMonth(){
      this.dateObject=getMonthDate()
      this.regDate=this.dateObject.year+'-'+this.dateObject.month
      console.log(this.dateObject);
    },
    // 页码变化时
    handleRightCurrentChange(val) {
      this.form.pageNumber = val;
      this.getList()
    },
    // 每页显示的数量变化时
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList()
    },
    // 获取查询参数
    getFormData() {
      var departmentIds = this.$refs.cascader.getCheckedNodes()

      if (!this.departmentIds.length) {
        this.form.departmentIds = []
      } else {
        this.form.departmentIds = []
        departmentIds.map(item => {
          this.form.departmentIds.push(item.value)
        })
      }

      var params = JSON.parse(JSON.stringify(this.form))

      params = {
        startTime: this.form.dateTimeStart || null,
        endTime: this.form.dateTimeEnd || null,
        pageNumber: this.form.pageNumber,
        pageSize: this.form.pageSize,
        name: this.form.name || null,
        z_AttendanceType: this.form.z_AttendanceType || 1,
        departmentIds: this.form.departmentIds ? this.form.departmentIds : [],
      }
      this.dateObject=getMonthDate(new Date(this.regDate))
      params.startTime = this.dateObject.startDate
      params.endTime = this.dateObject.endDate
      return params
    },
    // 导出excel
    attendancegroupExportz_attendancestatistictoexcel() {
      var params = this.getFormData()
      // this.leftTreeLoading = true
      this.$nextTick(async () => {
        attendancegroupExportz_attendancestatistictoexcel(params).then((res) => {
          // 自由班制（月）数据统计
          this.G.exportFile(res, this.i18n.t("Free class system (month)") + new Date().toLocaleString())
          if (res.code === 200) {
          }
        }).catch().finally(() => {
        })
      });
    },
    // 重置
    resetSearch() {
      this.initMonth()
      this.form.name = null
      this.form.pageNumber = 1
      this.form.pageSize = 10
      this.form.z_AttendanceType = 1
      this.form.departmentIds = []
      this.departmentIds = []
      this.getList()
    },
    // 搜索
    getList() {
      var params=this.getFormData()
      console.log('查询参数：',params);
      this.attendancegroupZ_attendancestatistic(params)
    },
    // 加载表格数据
    attendancegroupZ_attendancestatistic(params){
      this.tableLoading=true
      attendancegroupZ_attendancestatistic(params).then(res => {
        if (res.code == 200) {
          this.dataList=res.data || []
        }
      }).catch().finally(()=>{
        setTimeout(()=>{
          this.tableLoading=false
        },500)
      })
    },
    getdepartmenttree() {
      this.$nextTick(async () => {
        getdepartmenttree({IncludePersonInfo: false}).then((res) => {
          if (res.code === 200) {
            this.orgInfo = filterLastTreeData(res.data.rootDepartments)
          }
        }).catch().finally(() => {
        })
      });
    }
  },
};
</script>

<style scoped lang="scss">
.right-height {
  height: calc(100% - 36px);
}

::v-deep .content-width .el-form.wrapperform-box .el-form-item {
  width: calc((100% - 100px) / 3);
}
::v-deep .el-col {
  width: auto;
}
::v-deep .el-col .el-select {
  width: 205px !important;
}
::v-deep .el-col .el-form-item__content {
  display: inline-block;
}
.topBtn {
  // padding: 8px 20px;
}
</style>
